<template>
	<view class="content">
		<view v-if="detail && detail.order_sn" class="order_sn">运单号：{{detail.order_sn}}</view>
		<view v-else class="order_sn">未获取到数据~</view>
		<view v-if="img_list && img_list.length > 0">
			<image v-for="(item,index) in img_list" class="order_img" :src="item" @click="onPreviewImg(index)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 2,
				detail: {},
				img_list: [],
			}
		},

		onLoad(opts) {
			if (opts.id) {
				this.id = opts.id
			}
			this.getReceipt()
		},

		methods: {

			// 预览照片
			onPreviewImg(current) {
				uni.previewImage({
					current,
					urls: this.img_list,
					success: (res) => {},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				})
			},

			// 接口:获取回单详情
			async getReceipt() {
				let that = this
				uni.showLoading({ title: '加载中..', mask: true })
				let res = await that.$getReceipt({ id: this.id })
				if (res.code == 1) {
					this.detail = res.data
					if (this.detail) {
						this.detail.img && (this.img_list = this.detail.img.split(','))
					}
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		/* background-color: #f0f0f0; */
	}

	.order_sn {
		width: 100%;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 36rpx;
		margin: 5% 0 0 0;
	}

	.order_img {
		width: calc(90%);
		margin: 2% 4% 1% 4%;
		/* height: 100%; */
	}

	.txt_desc {
		width: 100%;
		color: #888;
		text-align: center;
		font-size: 26rpx;
	}
</style>